<template>
    <div>
        <!-- 搜索框 -->
        <el-row style="margin-bottom: 30px;display: flex;justify-content: center;align-items: center">
            <el-input
                @keyup.enter.native="searchBook()"
                placeholder="通过书名或作者搜索..."
                prefix-icon="el-icon-search"
                size="small"
                style="width: 400px;margin-right: 10px"
                v-model="queryParams.keyWord">
            </el-input>
            <el-button size="small" type="primary" icon="el-icon-search" @click="searchBook()">搜索</el-button>
        </el-row>

        <!-- 中间数据部分 -->
        <el-row>
            <el-tooltip effect="dark" placement="right" v-for="item in books" :key="item.id">
                <!-- 鼠标悬浮提示文字 -->
                <p slot="content" style="font-size: 14px;margin-bottom: 10px;">{{item.title}}</p>
                <p slot="content" style="font-size: 12px;margin-bottom: 10px">
                    <span>{{item.author}}</span> /
                    <span>{{item.date}}</span> /
                    <span>{{item.press}}</span>
                </p>
                <p slot="content" style="width: 300px" class="abstract">{{item.abs}}</p>

                <!-- 书籍选项卡 -->
                <el-card style="width:180px; margin-bottom:10px; height:260px; float:left; margin-right:15px" class="book" bodyStyle="padding:10px" shadow="hover">
                    <div class="cover" @click="editBook(item)">
                        <img :src="item.cover" alt="封面">
                    </div>
                    <div class="info">
                        <div class="title">
                            <a href="">{{item.title}}</a>
                        </div>
                        <i class="el-icon-delete" @click="deleteBook(item)"></i>
                    </div>
                    <div class="author">{{item.author}}</div>
                </el-card>
            </el-tooltip>

            <!-- 新增书籍 -->
            <i class="el-icon-circle-plus-outline" @click="addBook()"></i>
        </el-row>

        <!-- 新增/修改书籍表单 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" >
            <el-form v-model="form" style="text-align: left" ref="dataForm">
                <el-form-item label="书名" prop="title">
                    <el-input v-model="form.title" autocomplete="off" placeholder="不加《》"></el-input>
                </el-form-item>
                <el-form-item label="作者" prop="author">
                    <el-input v-model="form.author" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版日期" prop="date">
                    <el-input v-model="form.date" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="出版社" prop="press">
                    <el-input v-model="form.press" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="封面" prop="cover">
                    <el-input v-model="form.cover" autocomplete="off" placeholder="图片 URL"></el-input>
                    <img-upload @click="uploadImage()" ref="imgUpload"></img-upload>
                </el-form-item>
                <el-form-item label="简介" prop="abs">
                    <el-input type="textarea" v-model="form.abs" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="cid">
                    <el-select v-model="form.cid" placeholder="请选择分类">
                        <el-option label="文学" value="1"></el-option>
                        <el-option label="流行" value="2"></el-option>
                        <el-option label="文化" value="3"></el-option>
                        <el-option label="生活" value="4"></el-option>
                        <el-option label="经管" value="5"></el-option>
                        <el-option label="科技" value="6"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="id" style="height: 0">
                    <el-input type="hidden" v-model="form.id" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="submitForm()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 分页插件 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
    import ImgUpload from '../../components/ImageUpload/ImgUpload'
    import { list, addBook, updateBook, delBook } from "@/api/book";

    export default {
        components: { ImgUpload },
        data () {
            return {
                total: 0,
                title: "",
                dialogVisible: false,
                books: [],
                form: {
                    title: "",
                    author: "",
                    date: "",
                    press: "",
                    cover: "",
                    abs: "",
                    cid: "",
                },
                queryParams: {
                    keyWord: "",
                    pageNum: 1,
                    pageSize: 10
                },
            }
        },
        created() {
            this.getList()
        },
        mounted() {
            //this.$refs.booksArea.$on('booksArea', this.resetBooks)
        },
        methods: {
            getList() {
                list(this.queryParams).then(response => {
                    this.books = response.rows;
                    this.total = response.total;
                })
            },
            searchBook() {
                this.getList();
            },
            addBook() {
                this.title = "新增书籍";
                this.dialogVisible = true;
            },
            editBook(item) {
                this.form = item;
                this.title = "修改书籍";
                this.dialogVisible = true;
            },
            deleteBook(item) {
                this.$confirm('此操作将永久删除该书籍, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delBook(item).then(response => {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.getList();
                    })
                })
            },
            // 提交表单
            submitForm() {
                if (this.title.includes("新增")) {
                    addBook(this.form).then(response => {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        });
                        this.getList();
                    })
                }
                if (this.title.includes("修改")) {
                    updateBook(this.form).then(response => {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                        this.getList();
                        this.resetBooks();
                    })
                }
                this.dialogVisible = false;
            },
            // 取消表单
            cancel() {
                this.dialogVisible = false;
            },
            // 重置表单
            resetBooks() {
                this.form = {
                    title: "",
                    author: "",
                    date: "",
                    press: "",
                    cover: "",
                    abs: "",
                    cid: "",
                };
            },
            // 图片上传
            uploadImage() {

            }
        }
    }
</script>
<style scoped>
    .cover {
        width: 115px;
        height: 172px;
        margin-bottom: 7px;
        cursor: pointer;
    }

    img {
        width: 160px;
        height: 200px;
    }

    .title {
        font-size: 14px;
        text-align: left;
    }

    .info {
        margin-top: 35px;
    }

    .author {
        color: #333;
        width: 102px;
        font-size: 13px;
        margin-bottom: 6px;
        text-align: left;
    }

    .abstract {
        display: block;
        line-height: 17px;
    }

    .el-icon-delete {
        cursor: pointer;
        float: right;
    }

    .switch {
        display: flex;
        position: absolute;
        left: 780px;
        top: 25px;
    }

    a {
        text-decoration: none;
    }

    a:link, a:visited, a:focus {
        color: #3377aa;
    }

    .el-icon-circle-plus-outline {
        margin: 80px 40px;
        font-size: 100px;
        float: left;
        cursor: pointer;
    }
</style>

